<template>
    <div>
        <el-dialog :destroy-on-close="true"
                   title="选择图标"
                   :close-on-click-modal="false"
                   @close="closeDialog"
                   :visible="visible"
                   width="600px">
            <el-row>
                <el-button  @click="selectIcon('')"  >无图标</el-button>
            </el-row>
            <el-row>
                <el-col :span="1" v-for="item in iconList" style="margin:5px"  >
                    <el-button :icon="item" @click="selectIcon(item)" circle></el-button>
                </el-col>
            </el-row>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {
        },
        props: ['visible'],
        data() {
            return {
                icon:null,
                iconList: [
                    'el-icon-delete-solid',
                    'el-icon-s-tools',
                    'el-icon-user',
                    'el-icon-phone',
                    'el-icon-more',
                    'el-icon-star-on',
                    'el-icon-star-off',
                    'el-icon-goods',
                    'el-icon-warning',
                    'el-icon-question',
                    'el-icon-remove',
                    'el-icon-circle-plus',
                    'el-icon-success',
                    'el-icon-error',
                    'el-icon-help',
                    'el-icon-close',
                    'el-icon-picture',
                    'el-icon-upload',
                    'el-icon-upload2',
                    'el-icon-download',
                    'el-icon-camera',
                    'el-icon-video-camera',
                    'el-icon-bell',
                    'el-icon-s-order',
                    'el-icon-s-platform',
                    'el-icon-s-operation',
                    'el-icon-s-promotion',
                    'el-icon-s-home',
                    'el-icon-s-release',
                    'el-icon-s-ticket',
                    'el-icon-s-shop',
                    'el-icon-s-marketing',
                    'el-icon-s-flag',
                    'el-icon-s-comment',
                    'el-icon-s-claim',
                    'el-icon-s-opportunity',
                    'el-icon-s-data',
                    'el-icon-s-check',
                    'el-icon-s-grid',
                    'el-icon-menu',
                    'el-icon-share',
                    'el-icon-refresh',
                    'el-icon-rank',
                    'el-icon-view',
                    'el-icon-date',
                    'el-icon-edit',
                    'el-icon-folder',
                    'el-icon-scissors',
                    'el-icon-umbrella',
                    'el-icon-headset',
                    'el-icon-reading',
                    'el-icon-data-line',
                    'el-icon-suitcase',
                    'el-icon-files',
                    'el-icon-office-building',
                    'el-icon-school',
                    'el-icon-house',
                    'el-icon-shopping-cart-2',
                    'el-icon-present',
                    'el-icon-link',
                    'el-icon-chat-dot-round',
                    'el-icon-position',
                    'el-icon-location',
                    'el-icon-mobile-phone',
                    'el-icon-bangzhu',
                    'el-icon-message',
                ]
            }
        },methods: {
            selectIcon(icon){
                this.icon=icon;
                this.$emit('setIcon', this.icon);
                this.closeDialog();
            },
            closeDialog() {
                this.$emit('update:visible',false);
            },
        }
    }

</script>
